《uni |
您所在的位置:网站首页 › uniapp loading效果全屏 › 《uni |
本文分享的button组件为uni-app的内置组件button,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性更多…没有本质上的区别~ 《uni-app》表单组件-Button按钮 一. 简介二. 基础用法三. 按钮主题色3.1 说明3.2 平台差异 四. size属性五. plain属性六. disabled禁用属性七. loading属性八. 事件机制九. open-type开放能力9.1 uni-app9.2 微信小程序原版9.3 代码对比9.4 open-type有效值 十. 小结 一. 简介Button,按钮,图形化界面基础组件之一,常用于响应用户的点击事件、触发业务逻辑操作时使用; 二. 基础用法按钮基础用法如下: 这是一个按钮在基础用法下,uni-app将 启用一组内置在button组件内部的默认参数(包括主题,尺寸,状态等等),其表现形态 效果图 如下: uni-app官方一共内置了 三组主题色 供用户直接使用,分别是:primary,default,warn,使用方式则是通过 属性的方式 传入,属性关键词为 type 参数说明类型可选值默认值type按钮的主题色stringprimary| default | warndefault不同的type值将对应不同的主题色,示例代码如下: primary default warn其表现形态 效果图 如下: 我们在基础用法中有一个 不带任何参数的示例,虽然使用时不带任何参数,但在组件内部主题色其实是有 默认值 的,默认值为 default,也就是说,当我们不使用type属性的时候,在其内部完全等同于使用了default default default 3.2 平台差异另外,uni-app是一个跨平台的解决方案,因此 某些属性在编译后存在一定的平台差异,在主题色这一块差异的体现主要在 primary 这个属性,type="primary" 的button在最终编译后由于平台的不同会根据平台定义primary展示对应的颜色,具体差异如下: 微信小程序、360小程序App、H5、百度小程序、支付宝小程序、飞书小程序、快应用字节跳动小程序QQ小程序绿色蓝色红色浅蓝色也就是说,我们在uni-app中将button的设置成primary,在 微信小程序 中按钮会显示成 绿色,在 qq小程序中 会显示成 浅蓝色,在 字节跳动小程序 中会显示成 红色; 四. size属性size属性,用于控制button的尺寸大小,和主题色属性一样,它作为一个属性直接作用于button组件,并且值为string类型,uni-app官方一共内置了两种尺寸:default 和 mini,具体如下: 参数说明类型可选值默认值size按钮的大小尺寸stringdefault| minidefault我们以 type=“default”,且 不同尺寸为例,代码如下 默认default尺寸 默认mini尺寸其表现形态的 效果图 如下: 和主题色一样,如果不传入size属性,那么等同于值为 default 默认default尺寸 默认default尺寸 五. plain属性plain属性,用于控制按钮是否处于镂空,或者说使用了plain属性的按钮将处于 幽灵模式,即 内容反色,背景变为透明,该种类常常作用在一些有底色的DOM上,说明如下: 参数说明类型可选值默认值plain控制按钮是否镂空booleantrue| falsefalse演示代码如下: primary+plain default+plain warn+plain其表现形态展示的 效果图 如下: disabled属性,用于控制按钮是否可点击,当按钮处于disabled状态下时,按钮的形态将 置灰 且用户 不可再进行点击操作 参数说明类型可选值默认值disabled控制按钮是否可点击booleantrue| falsefalse代码示例如下: primary+disabled default+disabled warn+disabled其表现形态展示的 效果图 如下: loading属性,该属性用于控制按钮是否处于loading状态,严格的来说,loading状态算是一种组合状态,它主要由 disabled 加上 loading动画 组合而成,和disabled属性不同的是,uni-app中loading属性的disabled并不会置灰按钮,具体说明如下 参数说明类型可选值默认值loading名称前是否带 loading 图标booleantrue| falsefalseloading属性常用于等待阶段,比如:用户注册时,当用户填写完信息并点击注册按钮后,此时信息已被发送至后台,为了保证用户不进行重复点击注册按钮,且希望通过交互效果告知用户注册已经正在处理中了,那么就可以使用loading属性; primary+loading default+loading warn+loading其表现形态展示的 效果图 如下: 在uni-app中的事件机制完全遵循于Vue的语法,那么理所当然的button的事件也遵循Vue的语法,比如,我们要为按钮添加一个点击事件,点击后提示一个alert弹窗,那么代码如下 默认按钮 这是一个按钮 export default { methods: { handleClick() { alert('触发点击'); } } };我们看到 点击事件的绑定是遵循Vue的语法的,通过指令 @ 或者 v-on 的语法,如下 open-type,开放能力,uni-app作为跨端的解决方案,必然有对应各个小程序的open-type,可能会有小伙伴问,什么是open-type,简单的说,就是封装好的一些公共能力,这些能力可以快速的协助我们完成业务需求,比如获取用户的手机号码,分享转发等等; uni-app的open-type值综合了众多小程序,用法与原版大致相似,最主要的区别还是语法,毕竟语法上uni-app遵循的是Vue的语法,举个例子吧,我们以微信小程序为例,获取用户的手机号码,我们看一下在 uni-app中书写后编译运行结果 以及 在原版微信小程序开发者工具中的运行结果; 9.1 uni-appuni-app中我们声明了一个 open-type,值为 getPhoneNumber 意思为获取手机号码,之后绑定了一个 自定义事件getPhoneNumber 取得点击时的值并打印,具体代码如下,: 获取用户手机 export default { methods: { decryptPhoneNumber(e) { console.log(e); } } };执行编译,并运行在微信小程序开发者工具中,运行路径如下:运行 -> 运行到小程序模拟器 -> 微信开发者工具: 接着,我们看一下在微信小程序中的实现代码,如下: 这是一个按钮 Page({ data: {}, getPhoneNumber(e){ console.log(e) }, })代码展示效果如下: 为了更好的了解两者代码上的书写差异,我们在对比一下 获取用户手机 这是一个按钮代码确实非常接近,最大的区别就是 自定义事件 了,uni-app中使用的是 Vue的语法绑定的事件,而在微信小程序中则是 原生的bind事件捕捉机制; 9.4 open-type有效值除了 getPhoneNumber 之外,uni-app还有非常多的 open-type有效值,这些值存在平台上的一些差异,毕竟不同的平台API并不是完全一致的,具体如下,就不一一介绍了,有兴趣的小伙伴可以挑感兴趣的试试: 值说明平台差异说明feedback打开“意见反馈”页面,用户可提交反馈内容并上传日志App、微信小程序、QQ小程序share触发用户转发微信小程序、百度小程序、支付宝小程序、字节跳动小程序、飞书小程序、QQ小程序、快手小程序、京东小程序、360小程序getUserInfo获取用户信息,可以从@getuserinfo回调中获取到用户信息微信小程序、百度小程序、QQ小程序、快手小程序、京东小程序、360小程序contact打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息微信小程序、百度小程序、快手小程序getPhoneNumber获取用户手机号,可以从@getphonenumber回调中获取到用户信息微信小程序、百度小程序、字节跳动小程序、支付宝小程序、快手小程序、京东小程序。launchApp小程序中打开APP,可以通过app-parameter属性设定向APP传的参数微信小程序、QQ小程序、快手小程序、京东小程序openSetting打开授权设置页微信小程序、QQ小程序、百度小程序、快手小程序、京东小程序、360小程序chooseAvatar获取用户头像,可以从@chooseavatar回调中获取到头像信息微信小程序2.21.2版本+getAuthorize支持小程序授权支付宝小程序lifestyle关注生活号支付宝小程序contactShare分享到通讯录好友支付宝小程序基础库1.11.0版本+openGroupProfile呼起QQ群资料卡页面,可以通过group-id属性设定需要打开的群资料卡的群号,同时manifest.json中必须配置groupIdListQQ小程序基础库1.4.7版本+openGuildProfile呼起频道页面,可以通过guild-id属性设定需要打开的频道IDQQ小程序基础库1.46.8版本+openPublicProfile打开公众号资料卡,可以通过public-id属性设定需要打开的公众号资料卡的号码,同时manifest.json中必须配置publicIdListQQ小程序基础库1.12.0版本+shareMessageToFriend在自定义开放数据域组件中,向指定好友发起分享据QQ小程序基础库1.17.0版本+addFriend添加好友, 对方需要通过该小程序进行授权,允许被加好友后才能调用成功用户授权QQ小程序addColorSign添加彩签,点击后添加状态有用户提示,无回调QQ小程序基础库1.10.0版本+addGroupApp添加群应用(只有管理员或群主有权操作),添加后给button绑定@addgroupapp事件接收回调数据QQ小程序基础库1.16.0版本+addToFavorites收藏当前页面,点击按钮后会触发Page.onAddToFavorites方法QQ小程序基础库1.19.0版本+chooseAddress选择用户收货地址,可以从@chooseaddress回调中获取到用户选择的地址信息百度小程序3.160.3版本+chooseInvoiceTitle选择用户发票抬头,可以从@chooseinvoicetitle回调中获取到用户选择发票抬头信息百度小程序3.160.3版本+login登录,可以从@login回调中确认是否登录成功百度小程序3.230.1版本+subscribe订阅类模板消息,需要用户授权才可发送百度小程序favorite触发用户收藏快手小程序watchLater触发用户稍后再看快手小程序openProfile触发打开用户主页快手小程序 十. 小结本文主要分享了uni-app中内置组件button的一些用法,包括 属性的使用,事件机制 以及 一些开放能力,我们知道button是图形化界面中的基石之一,它承担了用户与系统之间绝大多数的交互,随着时代的发展,用户对于界面的要求越来越高,不管是界面的美观还是交互逻辑的合理性; 在保证界面质量的要求下,如何提高开发效率逐渐成为了开发的一大难题,时代的答案则是 组件的高度封装来解决,将常用的功能,属性统统进行封装,就如同uni-app中的button组件,它内置了主题,大小,loading等属性,在使用的时候简单的设置即可完成期望的功能和交互; (PS:都已经看到这里了,点个赞,求个关注吧,万分感谢~) |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |